<template>
  <!-- <layout></layout> -->
  <!-- <div class="App">
      <h1>我是根组件 用于测试父组件向子孙组件传递参数</h1>
      <A></A>
    </div> -->
  <!-- <div>
      <C @on-click="getflag"></C>
      <D :flag="flag"></D>
    </div> -->
  <!-- <E></E>
    <F></F> -->
  <!-- <renderDom title="我是标题" @on-click = "getNum"></renderDom> -->

  <!-- 第二十六章测试
  <button @click="myflag = !myflag">change {{myflag}}</button>
  <div>标题 {{ title }}</div>
  <Dialog v-model:title="title" v-model="myflag" v-model.tangshao = 'myflag'></Dialog> -->

  第二十七章测试
  <div>
    <!-- 生命周期钩子参数详解
    <button @click="flag27 = !flag27">切换</button>
    <Directe v-if="flag27" v-move:aaa.tang="{ background: 'green',flag27:flag27 }"></Directe>
    v-move自定义组件:aaa参数.tang修饰符 { background: 'red' }值 -->
    <!-- 函数简写
    <input v-model="value" type="text">
    <Directe v-move="{ background: value }"></Directe> -->
    <div v-move class="box">
      <div class="header"></div>
      <div>内容</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { provide, ref, reactive, DirectiveBinding, Directive } from 'vue';
import layout from './layout/index.vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
import D from './components/D.vue'
import E from './components/E.vue'
import F from './components/F.vue'
import renderDom from './App'
import Dialog from './components/Dialog.vue'
import Directe from './components/directive27-自定义指令.vue'

// 第二十七章测试
type Dir = {
  background: string
}

const vMove:Directive<any,void> = (el:HTMLElement,bingding:DirectiveBinding)=>{
  let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement
  console.log(moveElement)
  const mouseDown = (e:MouseEvent)=>{
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop
    const move = (e:MouseEvent)=>{
      // console.log(e)
      el.style.left = e.clientX - X + 'px'
      el.style.top = e.clientY - Y + 'px'
    }
    document.addEventListener('mousemove',move)
    document.addEventListener('mouseup',()=>{
      document.removeEventListener('mousemove',move)
    })
  }
  moveElement.addEventListener('mousedown',mouseDown)
}


// 函数简写
// let value = ref<string>('')
// const flag27 = ref(true)
// const vMove: Directive = (el: HTMLElement, bingding: DirectiveBinding<Dir>) => {
//   el.style.background = bingding.value.background
// }
// 生命周期钩子参数详解
// const vMove: Directive = {
//   created() {
//     console.log('======>created')
//   },
//   beforeMount() {
//     console.log('======>beforeMount')
//   },
//   mounted(el:HTMLElement,dir:DirectiveBinding<Dir>) {
//     console.log('======>Mounted')
//     el.style.background = dir.value.background
//     console.log(dir.value.background)
//   },
//   beforeUpdate() {
//     console.log('======>beforeUpdate')
//   },
//   updated() {
//     console.log('======>updated')
//   },
//   beforeUnmount() {
//     console.log('======>beforeUnmount')
//   },
//   unmounted() {
//     console.log('======>unmounted')
//   },
// }



// 第二十六章测试
const show = ref(true)
let title = ref<string>('我是大神')
let myflag = ref<boolean>(false)

// provide('flag',ref(false))
let flag = ref(false)
const getflag = (params: boolean) => {
  flag.value = params
}

const getNum = (num: number) => {
  console.log(num, '我接受到了')
}

</script>

<style lang="less">
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  .header {
    height: 20px;
    background: black;
    cursor: move;
  }
}

.App {
  width: 300px;
  height: 300px;
  background: red;
  color: #fff;
}


html,
body,
#app {
  height: 100%;
  overflow: hidden;
  margin: 0;
  width: 100%;
  max-width: none;
}
</style>